<!DOCTYPE html>
<html>

	<head>
		{% include 'zbook/common/header.html' %}
		<title>书架</title>
	</head>

	<body>
		{% include 'zbook/common/topbar.html' %}
		<!--书架-->
		<div class="container">
			<!--推荐书籍-->
			{% include 'zbook/common/recommend.html' %}
			<!--书架样式-->
			<div class="bookshelf-style species-module">
				<div class="recommend-style">
					<div class="row" style="margin:0px;">
						{% for book in data.books %}
						<div class="col-sm-6 col-md-3 col-xs-6">
							<div class="thumbnail">
								<a href="/catalog?bid={{book.id}}" class="clearfix">
									<div class="thumbnail-img">
										{% if book.img %}
										<img data-src="holder.js/100%x200" alt="100%x200" src="{{ book.img }}" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
										{% else %}
										<img data-src="holder.js/100%x200" alt="100%x200" src="/_uploads/photos/default_img.png" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
										{% endif %}
										<h5 class=" author-name">作者：{{ book.auth }}</h5>
									</div>
									<div class="caption">
										<div class="book-title clearfix">
											<h4 class="navbar-left">《{{ book.name }}》 </h4></div>
										{% if book.desc %}
                            			<p class="recommend-summary">{{ book.desc|truncate(46) }}</p>
										{% else %}
                            			<p class="recommend-summary">《{{book.name}}》作者是{{ book.auth|truncate(7, True) }}，因为本书暂时还没有阅读过，等以后读过再填写书籍的介绍...</p>
                            			{% endif %}
									</div>
									<span class="recommend-sheets">第 {{ book.sheets }} 章</span>
								</a>
								<div class="bookshelf-operate clearfix"><a href="/bookself?op=unfav&bid={{book.id}}" class="btn btn-default">取消收藏</a><a href="/read?bid={{book.id}}" class="btn btn-info">阅读</a></div>
							</div>
						</div>
						{% endfor %}
					</div>

				</div>
			</div>
		</div>
		{% include 'zbook/common/footer.html' %}
	</body>

</html>
<script>
	var topnode = document.querySelector('#header-top');

	function change() {
		var bgheader = document.getElementById('integral-bgheader');
		var y = document.scrollingElement.scrollTop;
		bgheader.style.opacity = (((y / 50) > 0.9) ? 0.9 : (y / 50));
		if(y > 50) {
			topnode.classList.add("headerstyle");
		} else {
			topnode.classList.remove("headerstyle");
		}
	}
	document.addEventListener('touchmove', change);
	document.addEventListener('scroll', change);
</script>